<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>权限管理</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" th:href="@{/bower_components/bootstrap/dist/css/bootstrap.min.css}">
  <!-- Font Awesome -->
  <link rel="stylesheet" th:href="@{/bower_components/font-awesome/css/font-awesome.min.css}">
  <!-- Ionicons -->
  <link rel="stylesheet" th:href="@{/bower_components/Ionicons/css/ionicons.min.css}">
  <!-- DataTables -->
  <link rel="stylesheet" th:href="@{/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css}">
  <!-- Theme style -->
  <link rel="stylesheet" th:href="@{/dist/css/AdminLTE.min.css}">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" th:href="@{/dist/css/skins/_all-skins.min.css}">
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}">

</head>
<body class="hold-transition skin-purple sidebar-mini">
<div class="wrapper">

  <div th:replace="/common/header :: header"></div>

  <!-- Left side column. contains the logo and sidebar -->
  <div th:replace="/common/aside :: aside"></div>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="row">
        <div class="col-md-6">
          <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li class="active"></li>
          </ol>
        </div>
      </div>

    </section>

    <!-- Main content -->
    <section class="content">
      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title">权限管理</h3>&nbsp;&nbsp;<a ><button class="btn btn-info " id="editPermission" data-toggle="modal" data-target="#myModal" >修改权限</button></a>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="mytable" class="table table-bordered table-hover">
                <thead>
                <tr >
                  <th>角色</th>
                  <th>角色描述</th>
                  <th>权限</th>
                  <th>权限描述</th>
                  <th>Operation</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="authorities: ${authorities}">
                  <td th:text="${authorities.roleType}"></td>
                  <td th:text="${authorities.roleDescription}"></td>
                  <td th:text="${authorities.authorityType}"></td>
                  <td th:text="${authorities.authorityDescription}"></td>
                  <td>
                    <a th:data-id="${authorities.authorityId}" data-opt="del" class=" del">
                      <button class="btn-sm btn-danger btn-flat" >删除</button>
                    </a>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <!-- /.box-body -->
          </div>
          <!-- /.box -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
  <div th:replace="/common/footer :: footer"></div>


</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->
<script th:src="@{/bower_components/jquery/dist/jquery.min.js}"></script>
<!-- Bootstrap 3.3.7 -->
<script th:src="@{/bower_components/bootstrap/dist/js/bootstrap.min.js}"></script>
<!-- DataTables -->
<script th:src="@{/bower_components/datatables.net/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js}"></script>
<!-- SlimScroll -->
<script th:src="@{/bower_components/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<!-- FastClick -->
<script th:src="@{/bower_components/fastclick/lib/fastclick.js}"></script>
<!-- AdminLTE App -->
<script th:src="@{/dist/js/adminlte.min.js}"></script>
<!-- AdminLTE for demo purposes -->
<script th:src="@{/dist/js/demo.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<!-- page script -->
<script>
    $(function () {
        $('#mytable').DataTable({
            "language": {
                "lengthMenu": "每页 _MENU_ 条记录",
                "zeroRecords": "没有找到记录",
                "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                "infoEmpty": "无记录",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "search":"快速检索: ",
                "oPaginate": {
                    "sPrevious": "上页",
                    "sNext": "下页"
                }
            }

        })

        layui.use('layer', function () {
            var $ = layui.jquery;
            // 删除操作
            $('.content').on('click', 'a.del', function () {
                var id = $(this).data('id');// 获取点击项的id
                layer.confirm('您确定要删除这条数据吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function (index) {
                    layer.closeAll('dialog');
                    $.ajax({
                        type: 'post',
                        url: '/manager/delManager?id='+id,
                        success: function () {
                            setTimeout(function () {
                                location.reload();
                            }, 1000);
                        },
                        error: function () {
                            location.reload();
                        }
                    })

                });
            })
        })
        //权限描述选择
        $('#permission').on('change',function () {
            var permission = $('#permission').val();
            $.ajax( {
                url: '/permission/findPermissionDescription?permissionType='+permission,
                type: 'get',
                dataType:'JSON',
                success: function (data) {
                    console.log(data);
                    $('#permissionDescription').val(data.authorityDescription);
                    console.log(data.authorityId);
                    $('#authorityId').val(data.authorityId);
                }
            })
        })
        //角色描述选择
        $('#role').on('change',function () {
            var role = $('#role').val();
            $.ajax( {
                url: '/role/findRoleDescription?roleType='+role,
                type: 'get',
                dataType:'JSON',
                success: function (data) {
                    console.log(data);
                    $('#roleDescription').val(data.roleDescription);
                    console.log(data.roleId);
                    $('#roleId').val(data.roleId);
                }
            })
        })
        //模态框的隐藏和提交等事件
        $('#submitBtn').on('click',function () {
            $("#permissionForm").submit();
            $("#myModal").on("hidden.bs.modal", function() {
                $(this).removeData("bs.modal");
            });
        })

    })

   //下拉框数据的查询
    $('#editPermission').click(function () {
        $(this).attr('data-toggle','modal');
        $(this).attr('data-target','#myModal');

        $.ajax({
            async: true,
            url:'/permission/findAllPermission',
            type:'post',
            dataType:'JSON',
            success: function(data) {
                if(data.length>0){
                    $('#permission option').remove();
                }
                $('#permission').append('<option>'+'选择权限'+'</option>');
                for (var i=0 ;i<data.length;i++){
                    $('#permission').append('<option>'+data[i].authorityType+'</option>');
                }
                $.ajax({
                    async: false,
                    url:'/role/findAllRole',
                    type:'post',
                    dataType:'JSON',
                    success: function(data) {
                        if(data.length>0){
                            $('#role option').remove();
                        }
                        $('#role').append('<option>'+'选择角色'+'</option>');
                        for (var i=0 ;i<data.length;i++){
                            $('#role').append('<option>'+data[i].roleType+'</option>');
                        }
                    }
                })
            }
        })
    })



</script>


<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">权限修改</h4>
      </div>
      <div class="modal-body">
        <form id="permissionForm" action="/permission/updateRolePermission" >
          <div class="form-group">
            <label for="permission" class="control-label">权限:</label>
            <input hidden="hidden" name="authorityId" id="authorityId">
            <select type="text" class="form-control" id="permission" name="permission"></select>
          </div>
          <div class="form-group">
            <label for="permissionDescription" class="control-label">权限描述:</label>
            <input type="text" class="form-control" id="permissionDescription" name="permissionDescription">
          </div>
          <div class="form-group">
            <label for="role" class="control-label">角色:</label>
            <input hidden="hidden" name="roleId" id="roleId">
            <select type="text" class="form-control" id="role" name="role"></select>
          </div>
          <div class="form-group">
            <label for="roleDescription" class="control-label">角色描述:</label>
            <input class="form-control" id="roleDescription" name="roleDescription">
          </div>
          <div class="text-right">
            <span id="returnMessage" class="glyphicon"> </span>
            <button type="button" class="btn btn-default right" data-dismiss="modal">关闭</button>
            <button id="submitBtn" type="button" class="btn btn-primary" >修改</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
    window.onload=function (ev) {
        $(function () {
            if ($('#login').text() == "登录") {
                layer.alert("请重新登录");
                window.location.href = "/";
            }
        })

    }
</script>
</body>
</html>
